layui.config({
    base: CXL.ctxPath + '/externaljs/'
}).extend({ //设定组件别名
    echarts: 'echarts/echarts',
    axios: 'axios/axios'
});
layui.use(['table', 'laydate', 'form', 'layer', 'element', 'echarts', 'axios'], function () {
    const totalWidth=1200;
    const totalHeight=700;
    const roller2CeilingHeight=50;  //最上面辊道的上边缘离天花板的高度
    const roller2FloorHeight=50;    //最下面的辊道的下边缘离地板的高度
    const roller2LeftWidth=100;     //辊道的左边缘离整个画布的最左边的宽度
    const rollerHeight=100;
    const rollerWidth=1000;
    const circleRadius=25;           //圆的半径
    const circle2RollerLeftWidth=800;  //圆心离辊道最左边的边缘的宽度
    const stockHeight=150;
    const stockWidth=300;
    const stock2RollerHeight=50;      //垛位的上边缘离辊道的下边缘的高度
    const stock2stockWidth=20;        //左边垛位的右边缘离右边垛位的左边缘的宽度
    const stock2LeftWidth=150;        //左边垛位的左边缘离画布最左边的宽度
    const scale=0.03;

    const craneContainer = new PIXI.Container();  //大车
    const smallCraneContainer = new PIXI.Container(); //小车
    const rectColor=0x00FFFF;
    const rectFrameColor2=0xFF00FF;
    const rectFrameColor=0x00FF00;
    const wallRectColor=0xFFFF00
    let form = layui.form;

    let pathDash1;
    let pathDash2;
    let whichPathIsSelect=1;
    const app = new PIXI.Application({
        width: totalWidth,
        height:totalHeight,
        backgroundColor: 0x021e2e
    });
    document.getElementById("pixi").appendChild(app.view);

    initDraw();

    function initDraw(){
        drawTopRoller();
        drawBottomRoller();
        drawLeftStack();
        drawRightStack();
        drawPathDash1();
        drawPathDash2();

        drawBigCrane('0xbc4702',60,30,8,);
        drawSmallCrane('0xa233c6',60,20,'天车');
        TweenMax.to(craneContainer, 6, { x:400, y: craneContainer.y });
        TweenMax.to(smallCraneContainer, 6, { x:400, y:300});
    }

    function drawPathDash1(){
        pathDash1 = new PIXI.Graphics();
        pathDash1.lineStyle(4, 0xFFFFFF, 1);
        drawDash(pathDash1,roller2LeftWidth+circle2RollerLeftWidth, roller2CeilingHeight+rollerHeight/2,roller2LeftWidth+circle2RollerLeftWidth,totalHeight-roller2FloorHeight-rollerHeight/2);
        drawDash(pathDash1,roller2LeftWidth+circle2RollerLeftWidth, totalHeight/2,roller2LeftWidth+circle2RollerLeftWidth-25,totalHeight/2-25);
        drawDash(pathDash1,roller2LeftWidth+circle2RollerLeftWidth, totalHeight/2,roller2LeftWidth+circle2RollerLeftWidth+25,totalHeight/2-25);
        app.stage.addChild(pathDash1);
    }

    function drawPathDash2(){
        pathDash2 = new PIXI.Graphics();
        pathDash2.lineStyle(4, 0xFFFFFF, 1);
        drawDash(pathDash2,roller2LeftWidth+circle2RollerLeftWidth,totalHeight-roller2FloorHeight-rollerHeight/2,roller2LeftWidth+circle2RollerLeftWidth,roller2CeilingHeight+rollerHeight/2);
        drawDash(pathDash2,roller2LeftWidth+circle2RollerLeftWidth,totalHeight/2,roller2LeftWidth+circle2RollerLeftWidth-25,totalHeight/2+25);
        drawDash(pathDash2,roller2LeftWidth+circle2RollerLeftWidth,totalHeight/2,roller2LeftWidth+circle2RollerLeftWidth+25,totalHeight/2+25);
        //app.stage.addChild(pathDash2);
    }
    function drawDash(graphic,x1, y1, x2, y2, dashLength = 5, spaceLength = 5) {
        let x = x2 - x1;
        let y = y2 - y1;
        let hyp = Math.sqrt(x * x + y * y);
        let units = hyp / (dashLength + spaceLength);
        let dashSpaceRatio = dashLength / (dashLength + spaceLength);
        let dashX = (x / units) * dashSpaceRatio;
        let spaceX = x / units - dashX;
        let dashY = (y / units) * dashSpaceRatio;
        let spaceY = y / units - dashY;
        graphic.moveTo(x1, y1);
        while (hyp > 0) {
            x1 += dashX;
            y1 += dashY;
            hyp -= dashLength;
            if (hyp < 0) {
                x1 = x2;
                y1 = y2;
            }
            graphic.lineTo(x1, y1);
            x1 += spaceX;
            y1 += spaceY;
            graphic.moveTo(x1, y1);
            hyp -= spaceLength;
        }
        graphic.moveTo(x2, y2);
    }

    function drawLeftStack(){
        const stackframe = new PIXI.Graphics();
        stackframe.lineStyle(1.4,rectFrameColor,1,0);
        stackframe.drawRect(stock2LeftWidth,roller2CeilingHeight+rollerHeight+stock2RollerHeight,stockWidth,stockHeight);
        app.stage.addChild(stackframe);

        const stackText = new PIXI.Text("垛位1", {
            fontSize: 22,
            fill: 0xFFFFFF
        });
        stackText.x=stock2LeftWidth+20;
        stackText.y =roller2CeilingHeight+rollerHeight+stock2RollerHeight+20;
        app.stage.addChild(stackText);
    }

    function drawRightStack(){
        const stackframe = new PIXI.Graphics();
        stackframe.lineStyle(1.4,rectFrameColor,1,0);
        stackframe.drawRect(stock2LeftWidth+stockWidth+stock2stockWidth,roller2CeilingHeight+rollerHeight+stock2RollerHeight,stockWidth,stockHeight);
        app.stage.addChild(stackframe);

        const stackText = new PIXI.Text("垛位2", {
            fontSize: 22,
            fill: 0xFFFFFF
        });
        stackText.x=stock2LeftWidth+stockWidth+stock2stockWidth+20;
        stackText.y =roller2CeilingHeight+rollerHeight+stock2RollerHeight+20;
        app.stage.addChild(stackText);
    }
    function drawTopRoller(){
        const rollerframe = new PIXI.Graphics();
        rollerframe.lineStyle(1.4,rectFrameColor,1,0);
        rollerframe.drawRect(roller2LeftWidth,roller2CeilingHeight,rollerWidth,rollerHeight);
        app.stage.addChild(rollerframe);

        const rollerText = new PIXI.Text("辊道1", {
            fontSize: 22,
            fill: 0xFFFFFF
        });
        rollerText.x=roller2LeftWidth+80;
        rollerText.y =roller2CeilingHeight+rollerHeight/2-rollerText.height/2;
        app.stage.addChild(rollerText);

        const circle = new PIXI.Graphics();
        circle.beginFill(rectColor);
        circle.drawCircle(roller2LeftWidth+circle2RollerLeftWidth,roller2CeilingHeight+rollerHeight/2,circleRadius);
        circle.endFill();
        app.stage.addChild(circle);
    }

    function drawBottomRoller(){
        const rollerframe = new PIXI.Graphics();
        rollerframe.lineStyle(1.4,rectFrameColor,1,0);
        rollerframe.drawRect(roller2LeftWidth,totalHeight-roller2FloorHeight-rollerHeight,rollerWidth,rollerHeight);
        app.stage.addChild(rollerframe);

        const rollerText = new PIXI.Text("辊道2", {
            fontSize: 22,
            fill: 0xFFFFFF
        });
        rollerText.x=roller2LeftWidth+80;
        rollerText.y =totalHeight-roller2FloorHeight-rollerHeight+rollerHeight/2-rollerText.height/2;
        app.stage.addChild(rollerText);

        const circle = new PIXI.Graphics();
        circle.beginFill(rectColor);
        circle.drawCircle(roller2LeftWidth+circle2RollerLeftWidth,totalHeight-roller2FloorHeight-rollerHeight/2,circleRadius);
        circle.endFill();
        app.stage.addChild(circle);
    }

    connect();
    setTimeout(function () {
        //subscribeTaskStatus();
        //subscribePoolCellsHeight();
        //TODO plc待对接后开发
        //subscribePlcData();
    }, 2000);


    function subscribePoolCellsHeight() {
        // 设置订阅地址
        SUBSCRIBE = SUBSCRIBE_PREFIX + "/cellHeight/craneNoOne" ;
        // 输出订阅地址
        // alert("设置订阅地址为：" + SUBSCRIBE);
        // 执行订阅消息
        stompClient.subscribe(SUBSCRIBE, function (responseBody) {
            var receiveMessage = JSON.parse(responseBody.body);
            //console.log(receiveMessage[0]);
            receiveMessage.forEach((oneMessage) => {
                drawPoolRectHeightText(oneMessage.jian,oneMessage.height);
            });
        });
    }


    function insertPoolCellsData(){
        $.ajax({
            url: CXL.ctxPath + '/dispatch/autoTask/insertPoolCellsData',
            type: 'post',
            data: JSON.stringify(poolCellArr),
            contentType:"application/json",
            dataType: 'json',
            success: function (res) {
                if (res.success) {
                    CXL.success("插入成功");
                } else {
                    CXL.error(res.msg);
                }
            },
            fail: function () {
                CXL.error("网络错误！");
            }
        });
    }

    function drawBigCrane(color,width,height,leftWidth){
        const craneRectTop = new PIXI.Graphics();
        const craneRectBottom = new PIXI.Graphics();
        const craneRectLeft = new PIXI.Graphics();
        const cranRectRight = new PIXI.Graphics();
        craneRectTop.beginFill(color);
        craneRectTop.drawRect(0, 0, width, height);
        craneRectTop.endFill();
        craneRectLeft.beginFill(color);
        craneRectLeft.drawRect(0,0,leftWidth,app.screen.height);
        craneRectLeft.beginFill();
        cranRectRight.beginFill(color);
        cranRectRight.drawRect(width - leftWidth,0,leftWidth,app.screen.height);
        cranRectRight.endFill();
        craneRectBottom.beginFill(color);
        craneRectBottom.drawRect(0,app.screen.height - height,width,height)
        craneRectBottom.endFill();
        craneContainer.addChild(craneRectTop);
        craneContainer.addChild(craneRectLeft);
        craneContainer.addChild(cranRectRight);
        craneContainer.addChild(craneRectBottom);
        app.stage.addChild(craneContainer);
    }

    function drawSmallCrane(color,width,height,name){
        const smallCrane = new PIXI.Graphics();
        smallCrane.beginFill(color);
        smallCrane.drawRect(0,0,width,height);
        smallCrane.endFill();
        const craneName =  new PIXI.Text(name, { fontSize: 18, fill: 0xffffff });
        craneName.x = 0 + smallCrane.width/2 - craneName.width/2;
        craneName.y = 0 + smallCrane.height/2 - craneName.height/2;
        smallCraneContainer.addChild(smallCrane);
        smallCraneContainer.addChild(craneName);
        app.stage.addChild(smallCraneContainer);
    }


    form.on('radio(selectPath)', function(data){
        let lastPath=whichPathIsSelect;
        whichPathIsSelect = data.value;
        if(whichPathIsSelect==1){
            if(lastPath==2){
                app.stage.removeChild(pathDash2);
            }
            app.stage.addChild(pathDash1);
        }else if(whichPathIsSelect==2){
            if(lastPath==1){
                app.stage.removeChild(pathDash1);
            }
            app.stage.addChild(pathDash2);
        }

    });



    //开始分流作业
    $("#splitFlowStartWork").click(function () {
        let postData={"splitFlowPath":whichPathIsSelect};
        $.ajax({
            url: CXL.ctxPath + '/craneWork/splitFlowTask/start',
            type: 'get',
            data:postData,
            dataType: 'json',
            success: function (res) {
                if (res.success) {
                    CXL.success("启动成功");
                } else {
                    CXL.error(res.msg);
                }
            },
            fail: function () {
                CXL.error("网络错误！");
            }
        });
    });

    //一键重复
    $("#splitFlowRepeatWork").click(function () {
        $.ajax({
            url: CXL.ctxPath + '/craneWork/splitFlowTask/repeat',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                if (res.success) {
                    CXL.success("停止成功");
                } else {
                    CXL.error(res.msg);
                }
            },
            fail: function () {
                CXL.error("网络错误！");
            }
        });
    });

    //开始任务
    $("#splitFlowStartWork").click(function () {
        $.ajax({
            url: CXL.ctxPath + '/craneWork/splitFlowTask/start',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                if (res.success) {
                    CXL.success("启动成功");
                } else {
                    CXL.error(res.msg);
                }
            },
            fail: function () {
                CXL.error("网络错误！");
            }
        });
    });

    //停止分流作业
    $("#splitFlowStopWork").click(function () {
        $.ajax({
            url: CXL.ctxPath + '/dispatch/splitFlowTask/stop',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                if (res.success) {
                    CXL.success("停止成功");
                } else {
                    CXL.error(res.msg);
                }
            },
            fail: function () {
                CXL.error("网络错误！");
            }
        });
    });


});